
@import "common.scss";
@function getvw($w){
    @return($w/750)*100 + vw
};

*{
    margin: 0;
    padding: 0;
}

.wrap{
    header{
        .top{
            height: getvw(100);
        }
        nav{
            // margin-top: getvw(50);
            width: getvw(750);
            display: flex;
            padding: getvw(17) getvw(23) getvw(9) getvw(23);
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            background-color: white;
            z-index: 999;
            box-sizing: border-box;
            button{
                width: getvw(123);
                height: getvw(57);
                background-color: white;
                border-radius: getvw(20);
                border: 1px solid #ff9344;
            }
            p{
                font-size: getvw(25);
            }
            .area{
                position: relative;
                select{
                    width: getvw(160);
                    height: getvw(55);
                    border: 1px solid #ff9344;
                    appearance: none;
                    padding-left: getvw(14);
                }
                i{
                    // font-size: getvw();
                    color: #ff9344;
                    position: absolute;
                    right: getvw(11);
                    pointer-events: none;right: getvw(16);
                    transform: translateY(-50%);
                    top: 50%;
                }
            }
        }
    }
    .banner{
        width: 100%;
        display:flex;
        justify-content: space-around;
        .banner-box{
            width: getvw(150);
            img{
                width: getvw(150);
                height: getvw(150);
                border-radius: 50%;
            }
            p{
                text-align: center;
            }
        }
    }
    .banner-bottom{
        height: getvw(50);
        width: 100%;
        .banner-bottom-box{
            padding-top: getvw(15);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            width: getvw(100);
            div{
                width: getvw(20);
                height: getvw(20);
                border-radius: 50%;
                background-color: #ff9344;
            }
        }
    }
    .food{
        .food-top{
            display: flex;
            position: relative;
            margin-top: getvw(20);
            align-items: center;
            img{
                width: getvw(60);
                height: getvw(60);
                margin-left: getvw(40);
            }
            p:nth-of-type(1){
                font-size: getvw(30px);
                font-weight: bold;
                margin-left: getvw(10);
            }
            p:nth-of-type(2){
                font-size: getvw(24px);
                font-weight: bold;
                position: absolute;
                top: getvw(10);
                right: getvw(45);
            }
            i{
                position:absolute;
                top: getvw(10);
                right: getvw(10);
                color: #ff9344;
            }

        }
        .food-main{
            display: flex;
            justify-content: space-around;
            margin: getvw(40) 0;
            img{
                width: getvw(133);
                height: getvw(133);
            }
        }
    }
    .sport{
        .sport-top{
            display: flex;
            position: relative;
            margin-top: getvw(20);
            align-items: center;
            img{
                width: getvw(70);
                height: getvw(70);
                margin-left: getvw(40);
            }
            p:nth-of-type(1){
                font-size: getvw(30px);
                font-weight: bold;
                margin-left: getvw(10);
            }
            p:nth-of-type(2){
                font-size: getvw(24px);
                font-weight: bold;
                position: absolute;
                top: getvw(10);
                right: getvw(45);
            }
            i{
                position:absolute;
                top: getvw(10);
                right: getvw(10);
                color: #ff9344;
            }

        }
        .sport-main{
            display: flex;
            justify-content: space-around;
            margin: getvw(40) 0;
            img{
                width: getvw(133);
                height: getvw(133);
            }
        }
    }

    .movie{
        .movie-top{
            display: flex;
            position: relative;
            margin-top: getvw(20);
            align-items: center;
            img{
                width: getvw(70);
                height: getvw(70);
                margin-left: getvw(40);
            }
            p:nth-of-type(1){
                font-size: getvw(30px);
                font-weight: bold;
                margin-left: getvw(10);
            }
            p:nth-of-type(2){
                font-size: getvw(24px);
                font-weight: bold;
                position: absolute;
                top: getvw(10);
                right: getvw(45);
            }
            i{
                position:absolute;
                top: getvw(10);
                right: getvw(10);
                color: #ff9344;
            }

        }
        .movie-main{
            display: flex;
            justify-content: space-around;
            margin: getvw(40) 0;
            img{
                width: getvw(133);
                height: getvw(133);
            }
        }
    }
    footer{
        ul{
            li:nth-of-type(2) i{
                 color: #ff9344;
            }
        }
    }
}
